.page-loding {
  font-size: 10rpx;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9999;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  .loding-boxs {
    display: flex;
    align-items: flex-end;
    .pages-loding {
      .pages-bg {
        width: 5.4em;
        height: 5.4em;
        background: url('') no-repeat;
        background-size: 100% 100%;
        background-position: center;
        animation: loading .8s ease-out infinite;
      }
    }
    .loding-text {
      background-image: -webkit-linear-gradient(left, #6b8068, #38458f 25%, #147B96 50%, #41bdd7 75%, #293ca5);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: textloding 2s infinite linear;
      text {
        font-weight: 600;
        font-size: 3em;
      }
    }
  }
}
.bottom-loding {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rpx;
  background-color: transparent;
  padding: 1em 0;
  min-height: 6em;
  .bottom-views {
    .bottom-box {
      display: flex;
      align-items: center;
      position: relative;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
     .round-iages {
       width: 100%;
        image {
          width: 3em;
          height: 3em;
          animation: moveloding 1.5s ease infinite;
        }
     }
     .round-text {
       text {
         font-weight: 400;
         font-size: 2.4em;
         color: #333;
       }
     }
    }
  }
  .bottom-end {
    display: flex;
    align-items: center;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    text {
      font-weight: 400;
      font-size: 2.4em;
      color: #333;
    }
  }
}
/*  页面加载 loding  */
@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
/*  页面加载 文字渐变   */
@keyframes textloding {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}
//  list 底部 加载 loding 
@keyframes moveloding {
  100% {
    transform: translateX(100rpx) rotate(360deg);
  }
  50% {
    transform: translateX(50rpx) rotate(180deg);
  }
 0% {
    transform: translateX(0) rotate(0deg);
  }
}